// 简单的颜色列表
$colors: (
  primary: red,
  secondary: yellow,
);

// 绑定变量在html文档内
:root {
  @each $name, $color in $colors {
    --color-#{$name}: #{$color};
  }
}

@function getColor($color-name) {
  @return var(--color-#{$color-name});
}


// 五种主题切换
$themes: (
  red: (
    borderColor: $color-primary-light-6,
    backgroundColor: $color-primary-light-6,
    fontColor: $color-primary-light-6,
    colorPrimaryLight1: $color-primary-light-9,
    colorPrimaryLight3: $color-primary-light-7,
    colorPrimaryLight5: $color-primary-light-5,
    colorPrimaryLight8: $color-primary-light-2,
    colorPrimaryLight9: $color-primary-light-1
  ),
  default: (
    borderColor: $color-primary-light-6,
    backgroundColor: $color-primary-light-6,
    fontColor: $color-primary-light-6,
    colorPrimaryLight1: $color-primary-light-9,
    colorPrimaryLight3: $color-primary-light-7,
    colorPrimaryLight5: $color-primary-light-5,
    colorPrimaryLight8: $color-primary-light-2,
    colorPrimaryLight9: $color-primary-light-1
  ),
  primary: (
    borderColor: $color-primary-light-6,
    backgroundColor: $color-primary-light-6,
    fontColor: $color-primary-light-6,
    colorPrimaryLight1: $color-primary-light-9,
    colorPrimaryLight3: $color-primary-light-7,
    colorPrimaryLight5: $color-primary-light-5,
    colorPrimaryLight8: $color-primary-light-2,
    colorPrimaryLight9: $color-primary-light-1
  ),
);

$theme-map: null;

@mixin themify($themes: $themes) {
  @each $theme-name, $map in $themes {
    // & 表示父级元素
    // !global 表示覆盖原来的
    .theme-#{"" + $theme-name} & { // 解决相关不能使用基础的颜色名称 比如 red white
      $theme-map: () !global;
      // 循环合并键值对
      @each $key, $value in $map {
        $theme-map: map-merge($theme-map, ($key: $value)) !global;
      }
      // 表示包含 下面函数 themed()
      @content;
      
      $theme-map: null !global;
    }
  }
}

@function themed($key) {
  @return map-get($theme-map, $key);
}

// start 字体颜色
@mixin fontColor {
  @include themify($themes) {
    color: $color-primary-light-6;
  }
}

@mixin fontColorPrimaryLight1 {
  @include themify($themes) {
    color: $color-primary-light-9;
  }
}

@mixin fontColorPrimaryLight5 {
  @include themify($themes) {
    color: $color-primary-light-5;
  }
}

@mixin fontColorPrimaryLight9 {
  @include themify($themes) {
    color: $color-primary-light-1;
  }
}

@mixin fontColorImportant {
  @include themify($themes) {
    color: $color-primary-light-6 !important;
  }
}
// end 字体颜色

// start 背景颜色
@mixin backgroundColor {
  @include themify($themes) {
    background-color: $color-primary-light-6;
  }
}

@mixin backgroundColorImportant {
  @include themify($themes) {
    background-color: $color-primary-light-6 !important;
  }
}

@mixin backgroundColorPrimaryLight1 {
  @include themify($themes) {
    background-color: $color-primary-light-9;
  }
}

@mixin backgroundColorPrimaryLight1Important {
  @include themify($themes) {
    background-color: $color-primary-light-9 !important;
  }
}

@mixin backgroundColorPrimaryLight3 {
  @include themify($themes) {
    background-color: $color-primary-light-7;
  }
}

@mixin backgroundColorPrimaryLight3Important {
  @include themify($themes) {
    background-color: $color-primary-light-7 !important;
  }
}

@mixin backgroundColorPrimaryLight5 {
  @include themify($themes) {
    background-color: $color-primary-light-5;
  }
}

@mixin backgroundColorPrimaryLight5Important {
  @include themify($themes) {
    background-color: $color-primary-light-5 !important;
  }
}

@mixin backgroundColorPrimaryLight8 {
  @include themify($themes) {
    background-color: $color-primary-light-2;
  }
}

@mixin backgroundColorPrimaryLight9 {
  @include themify($themes) {
    background-color: $color-primary-light-1;
  }
}

@mixin backgroundColorPrimaryLight9Important {
  @include themify($themes) {
    background-color: $color-primary-light-1 !important;
  }
}

// end 背景颜色

// start 边框颜色
@mixin borderColor {
  @include themify($themes) {
  }
}

@mixin borderColorPrimaryLight1 {
  @include themify($themes) {
    border-color: $color-primary-light-9;
  }
}

@mixin borderColorPrimaryLight1Important {
  @include themify($themes) {
    border-color: $color-primary-light-9 !important;
  }
}

@mixin borderColorPrimaryLight3 {
  @include themify($themes) {
    border-color: $color-primary-light-7;
  }
}

@mixin borderColorPrimaryLight3Important {
  @include themify($themes) {
    border-color: $color-primary-light-7 !important;
  }
}

@mixin borderColorPrimaryLight5 {
  @include themify($themes) {
    border-color: $color-primary-light-5;
  }
}

@mixin borderColorPrimaryLight5Important {
  @include themify($themes) {
    border-color: $color-primary-light-5 !important;
  }
}

@mixin borderColorPrimaryLight9 {
  @include themify($themes) {
    border-color: $color-primary-light-1;
  }
}

@mixin borderColorPrimaryLight9Important {
  @include themify($themes) {
    border-color: $color-primary-light-1 !important;
  }
}

@mixin borderColorImportant {
  @include themify($themes) {
    border-color: $color-primary-light-6 !important;
  }
}

@mixin borderTopColor {
  @include themify($themes) {
    border-top-color: $color-primary-light-6;
  }
}

@mixin borderBottomColor {
  @include themify($themes) {
    border-bottom-color: $color-primary-light-6;;
  }
}

@mixin borderLeftColor {
  @include themify($themes) {
    border-left-color: $color-primary-light-6;;
  }
}
// end 边框颜色

// start radio 
@mixin radioShadow {
  @include themify($themes) {
    box-shadow: -1px 0 0 0 $color-primary-light-6;
  }
}
// end radio

// start button
@mixin buttonShadow {
  @include themify($themes) {
    box-shadow: -1px 0 0 0 $color-primary-light-5;
  }
}
// end button

@mixin strokeColor {
  @include themify($themes) {
    stroke: $color-primary-light-6;
  }
}

@function getColorPrimary() {
  @return $color-primary-light-6;
}
